<h4>Scope is set to <code>todos-page</code> in module's providers.</h4>

<h5>Structural</h5>
<ng-container *transloco="let t">
  <p data-cy="todos-page-scope">{{ t('todos.title') }}</p>
  <p data-cy="global">{{ t('home') }}</p>
</ng-container>

<h5>Directive</h5>
<h6>Scope is set to `lazy-page` inline</h6>
<p
  data-cy="d-lazy-page-scope"
  transloco="lazyPage.title"
  translocoScope="lazy-page"
></p>
<p data-cy="d-global" transloco="b"></p>

<h5>Pipe</h5>
<p data-cy="p-todos-page-scope">{{ 'todos.title' | transloco }}</p>
<p data-cy="p-global">{{ 'home' | transloco }}</p>

<h5>Use read to get translations of a nested property</h5>

<ng-container *transloco="let t; prefix: 'nested'">
  <h5>{{ t('title') }}</h5>
  <p>{{ t('desc') }}</p>
</ng-container>
